var MaterialWarehouse = function () {
  var template = /* html */ `
    <div class="material-warehouse" v-loading.fullscreen.lock="loading">
      <div class="queryForm">
        <search-btn-view immediate btn-text="物料库存查询" @before-open="resetSearch" @search="searchData">
          <template slot="append">
            <el-button size="medium" type="primary" @click="exportExcel">导出excel</el-button>
          </template>
          <div slot="search-content">
            <search-form :search="search" type="material"></search-form>
          </div>
        </search-btn-view>
      </div>
      <div class="material-warehouse-table-div">
        <el-table fit stripe border :data="warehouseList" style="width:100%;" height="parent" :cell-class-name="tableCellClass"
          @row-click="tableRowClick">
          <el-table-column sortable :resizable="false" prop="providerName" label="供应商" :auto-width="true" min-width="75px"
            header-align="center"></el-table-column>
          <el-table-column sortable :resizable="false" prop="materialName" label="物料名称" :auto-width="true" min-width="90px"
            header-align="center"></el-table-column>
          <el-table-column sortable :resizable="false" prop="color" label="编号" :auto-width="true" min-width="70px"
            header-align="center"></el-table-column>
          <el-table-column sortable :resizable="false" prop="colorDescription" label="描述" :auto-width="true" min-width="90px"
            header-align="center"></el-table-column>
          <el-table-column sortable :resizable="false" prop="model" label="规格" :auto-width="true" min-width="70px"
            header-align="center"></el-table-column>
          <el-table-column sortable :resizable="false" prop="imgUrls" label="物料图片" width="90px" align="center">
            <template slot-scope="scope" v-if="scope.row.imgUrls.length>0">
              <el-image style="width:80px;height:80px" :src="scope.row.imgUrls[0]" fit="scale-down" :preview-src-list="scope.row.imgUrls">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="materialDeptName" label="物料部门" :auto-width="true" min-width="90px"
            align="center"></el-table-column>
          <el-table-column sortable :resizable="false" prop="providerNo" label="供方编号" :auto-width="true" min-width="90px"
            header-align="center"></el-table-column>
          <el-table-column sortable :resizable="false" prop="defaultWarehouse" label="仓库" width="80px" header-align="center"></el-table-column>
          <el-table-column sortable :resizable="false" prop="materialUseCount" label="占用数" width="75px" align="center">
            <template slot-scope="scope">
              <div :class="{'table-btn':scope.row.materialUseCount>0}" @click="lookAvailableCount(scope.row)">{{scope.row.materialUseCount}}</div>
            </template>
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="count" column-key="count" label="合格数" width="120px"
            header-align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-if="!scope.row.hasProduction" class="table-count-unit qualified-warehouse">
                <div style="min-width:calc(100% - 40px)">{{scope.row.count}}</div>
                <div>{{scope.row.unit}}</div>
              </div>
              <el-popover v-else title="生产单位数量" trigger="hover" placement="right-start">
                <div slot="reference" class="table-count-unit qualified-warehouse">
                  <div style="min-width:calc(100% - 40px)">{{scope.row.count}}</div>
                  <div>{{scope.row.unit}}</div>
                </div>
                <production-unit-info :warehouse="scope.row"></production-unit-info>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="noCount" column-key="noCount" label="不合格数" width="120px"
            header-align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-if="!scope.row.hasProduction" class="table-count-unit">
                <div style="min-width:calc(100% - 40px)">{{scope.row.noCount}}</div>
                <div>{{scope.row.unit}}</div>
              </div>
              <el-popover v-else title="生产单位数量" trigger="hover" placement="right-start">
                <div slot="reference" class="table-count-unit">
                  <div style="min-width:calc(100% - 40px)">{{scope.row.noCount}}</div>
                  <div>{{scope.row.unit}}</div>
                </div>
                <production-unit-info :warehouse="scope.row"></production-unit-info>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" column-key="position" label="仓位" :auto-width="true" min-width="60px"
            header-align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.positionList.length>0">
                {{scope.row.positionList.join(',')}}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange"></table-pagination>

      <el-dialog :title="dialogTitle" :visible.sync="openDialog" :width="dialogComp==='update-position-form'?'50%':'80%'"
        top="10vh" custom-class="material-warehouse-dialog" @closed="dialogColsed">
        <div style="height:calc(80vh - 64px);overflow:auto;padding:0 10px 10px">
          <component v-if="openDialog&&dialogComp!==null" :is="dialogComp" :warehouse="selectWarehouse" @refresh-data="refreshData"></component>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    mixins: [
      tablePaginationMixin()
    ],
    data: function () {
      var search = {
        materialName: '',
        model: '',
        color: '',
        providerName: '',
        warehouseType: '',
        isValid: 1,
        providerNo: '',
        materialDept: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        warehouseList: [],
        selectWarehouse: null,
        openDialog: false,
        dialogTitle: '',
        dialogComp: null
      };
    },

    methods: {
      setWarehouseList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        postData = {
          start: start,
          length: pageSize
        };

        this.setPostData(postData);

        this.loading = true;
        var self = this;
        ajaxRequest("companyMaterialCount/getCompanyMaterialCountList", postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var canUpdatePosition = res.code === 1;
          var warehouseList = res.returnData;
          for (var i = 0; i < warehouseList.length; i++) {
            var warehouse = warehouseList[i];
            self.formatData(warehouse, canUpdatePosition);
          }

          self.warehouseList = warehouseList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      formatData: function (warehouse, canUpdatePosition) {
        warehouse.hasProduction = warehouse.productionUnitCount > 0 || warehouse.productionUnitNoCount > 0;

        if (warehouse.positionList === null) {
          warehouse.positionList = [];
        }

        var warehouseType = warehouse.warehouseType;
        if ([4, 5].indexOf(warehouseType) === -1) {
          canUpdatePosition = false;
        }
        warehouse.canUpdatePosition = canUpdatePosition;

        SysUtil.tableSetDeptData(warehouse);

        var imgFields = ['img', 'imgTwo', 'imgThree', 'imgFour'];
        var imgUrls = [];
        for (var i = 0; i < imgFields.length; i++) {
          var field = imgFields[i];
          var imgUrl = warehouse[field];
          if (!SysUtil.isEmpty(imgUrl)) {
            if (imgUrl.indexOf('?') === -1) {
              imgUrl += '?imageMogr/auto-orient';
            } else {
              if (imgUrl.indexOf('imageMogr/') === -1) {
                imgUrl += '|imageMogr/auto-orient';
              }
            }
            imgUrls.push(imgUrl);
          }
        }
        warehouse.imgUrls = imgUrls;
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setWarehouseList(true);
      },

      pageChange: function () {
        this.setWarehouseList();
      },

      setPostData: function (postData) {
        var search = this.search;
        var fields = ['materialName', 'model', 'color', 'providerName', 'providerNo', 'warehouseType', 'isValid'];
        SysUtil.setPostData(postData, search, fields);

        var materialDept = search.materialDept;
        if (materialDept !== '') {
          postData.materialDeptId = materialDept.materialDeptId;
        }
      },

      tableRowClick: function (warehouse, column) {
        var columnKey = column.columnKey;
        if (columnKey === 'position') {
          this.toUpdatePosition(warehouse);
          return;
        }

        if (['materialUseCount', 'count', 'noCount', 'imgUrls'].indexOf(columnKey) !== -1) {
          return;
        }

        this.lookWarehouseInoutRecord(warehouse);
      },

      lookWarehouseInoutRecord: function (warehouse) {
        this.selectWarehouse = warehouse;
        this.dialogTitle = '出入库记录';
        this.dialogComp = 'warehouse-info-record';
        this.openDialog = true;
      },

      toUpdatePosition: function (warehouse) {
        if (!warehouse.canUpdatePosition) {
          return;
        }

        this.selectWarehouse = warehouse;
        this.dialogTitle = '修改物料仓位';
        this.dialogComp = 'update-position-form';
        this.openDialog = true;
      },

      lookAvailableCount: function (warehouse) {
        if (warehouse.materialUseCount === 0) {
          return;
        }

        this.selectWarehouse = warehouse;
        this.dialogTitle = '物料订单占用数';
        this.dialogComp = 'order-available-count';
        this.openDialog = true;
      },

      refreshData: function (hasClose) {
        if (hasClose) {
          this.openDialog = false;
        }
        this.setWarehouseList();
      },

      dialogColsed: function () {
        this.selectWarehouse = null;
        this.dialogTitle = '';
        this.dialogComp = null;
      },

      tableCellClass: function (option) {
        var column = option.column;
        var columnKey = column.columnKey;
        if (columnKey !== 'position') {
          return null;
        }

        var warehouse = option.row;
        if (warehouse.canUpdatePosition) {
          return 'table-btn';
        }
        return null;
      },

      exportExcel: function () {
        this.search = _.cloneDeep(this.oldSearch);
        var postData = {};
        this.setPostData(postData);
        var formParam = SysUtil.formatFormParam(postData);
        var basePath = SysUtil.getBasePath();
        var path = `${basePath}/companyMaterialCount/exportExcelFileByCompanyMaterial?${formParam}`;
        window.open(path);
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      ProductionUnitInfo: ProductionUnitInfo,
      OrderAvailableCount: OrderAvailableCount,
      UpdatePositionForm: UpdatePositionForm,
      WarehouseInfoRecord: WarehouseInfoRecord
    },

    template: template
  };
}();
